<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.block{
				width:50px;
				height: 50px;
				position: absolute;
			}
		</style>
	</head>
	
	<body>
		<script>
			// 小方块 点1下 绿 变黄，点  黄变红色  点一在，消失
			class Block{
				constructor(x=0,y=0,life=3) {
				    this.life = life; //生命
					this.colors = ["red","yellow","green"]; //颜色
					this.el = document.createElement("div"); //节点
					this.el.className = "block";//类名
					this.x = x; //x值与y值
					this.y = y;
					
					// 页面显示
					document.body.appendChild(this.el);
					// 添加事件（使用箭头函数改变this）
					this.el.addEventListener("click",()=>this.clickHd())
					// 向下移动
					this.ind = setInterval(()=>{
						this.y+=2; //让y值加1
						// 如果有一的高度超过浏览器视口的高度
						if(this.y>window.innerHeight){
							alert("游戏失败");	 //弹出游戏失败
							clearInterval(this.ind); //清除定时器					
							location.reload(true);//重新加载
						}
						this.render();
					},15)
					// 初始化
					this.render()
				}
				render(){
					this.el.innerText = this.life;
					this.el.style.left=this.x+"px";
					this.el.style.top =this.y+"px";
					this.el.style.backgroundColor = this.colors[this.life-1];
				}
				clickHd(){
					// 生命减1
					this.life--;
					if(this.life<=0){
						// 移除节点
						document.body.removeChild(this.el);
						// 定时器清除
						clearInterval(this.ind);
					}
					// 重新初始化
					this.render();
				}
			}			
			// var b1 = new Block();
			new Block(500,0,1);
			new Block(450,50);
			new Block(500,50,2);
			new Block(500,100);
			new Block(500,150);
			new Block(500,200,2);
			new Block(500,250);
			new Block(450,250,1);
			new Block(550,250);
		</script>
	</body>
</html>
